<template>
  <el-dialog
    top="30px"
    append-to-body
    title="分支机构"
    width="800px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          @keyup.enter.native="getData()"
          placeholder="机构名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.contact"
          @keyup.enter.native="getData()"
          placeholder="联系人"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      order: {
        agency_name: 'asc',
      },
      params: {
        index: 1,
        size: 10,
      },
      tableName: 'credit_agency_access_detail_view',
      loading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '联系人', prop: 'contact', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
      ],
    }
  },

  watch: {
    queryId: {
      handler: function () {
        if (this.queryId) {
          this.getData()
        }
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    getData() {
      this.loading = true
      this.params['credit_agency_access_id.eq'] = this.queryId
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = data.data || []
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
